<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美食幸运大转盘</title>
    <style>
        body {
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
            background-color: #fff9e6;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .container {
            text-align: center;
            position: relative;
        }

        h1 {
            color: #e74c3c;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            margin-bottom: 30px;
            font-size: 2.5em;
        }

        .wheel-container {
            position: relative;
            width: 450px;
            height: 450px;
            margin: 0 auto 30px;
        }

        .wheel {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            border: 15px solid #f39c12;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
            transform: rotate(0deg);
            background-color: white;
        }

        .section {
            position: absolute;
            width: 50%;
            height: 50%;
            transform-origin: bottom right;
            left: 0;
            top: 0;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 16px;
            color: white;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

        .pointer {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-top: 50px solid #e74c3c;
            z-index: 10;
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
        }

        .center-circle {
            position: absolute;
            width: 70px;
            height: 70px;
            background-color: white;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 5px solid #f39c12;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #e74c3c;
            font-size: 18px;
        }

        button {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 15px 35px;
            font-size: 20px;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: all 0.3s;
            font-weight: bold;
            margin-top: 20px;
        }

        button:hover {
            background-color: #c0392b;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }

        button:active {
            transform: translateY(1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .result {
            margin-top: 20px;
            font-size: 28px;
            color: #e74c3c;
            font-weight: bold;
            height: 40px;
            min-width: 300px;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #f00;
            border-radius: 50%;
            animation: fall 3s linear forwards;
            z-index: 100;
        }

        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>今天吃什么？</h1>
        <div class="wheel-container">
            <div class="pointer"></div>
            <div class="wheel" id="wheel">
                <!-- 转盘分区将通过JS动态生成 -->
            </div>
            <div class="center-circle">EAT!</div>
        </div>
        <div class="result" id="result"></div>
        <button id="spin-btn">开始选择</button>
    </div>

    <script>
        // 美食奖品配置
        const prizes = [
            { text: "美味家常菜", color: "#e74c3c" },
            { text: "面条", color: "#e67e22" },
            { text: "曹氏", color: "#d35400" },
            { text: "冒菜", color: "#f39c12" },
            { text: "瓦香鸡", color: "#f1c40f" },
            { text: "凉面", color: "#2ecc71" },
            { text: "泡面", color: "#27ae60" },
            { text: "火鸡面", color: "#16a085" },
            { text: "螺蛳粉", color: "#1abc9c" },
            { text: "牛肉饭", color: "#3498db" },
            { text: "米线", color: "#2980b9" },
            { text: "塔斯汀", color: "#9b59b6" },
            { text: "盖饭", color: "#8e44ad" },
            { text: "猪脚饭", color: "#34495e" },
            { text: "奶茶一杯", color: "#e84393" },
            { text: "炸鸡架", color: "#fd79a8" },
            { text: "寿司", color: "#00cec9" },
            { text: "煎饼果子", color: "#fab1a0" },
            { text: "酸辣粉", color: "#e17055" },
            { text: "肠粉", color: "#6c5ce7" },
            { text: "鸡公煲", color: "#a29bfe" },
            { text: "干锅", color: "#fd9644" },
            { text: "披萨", color: "#26de81" },
            { text: "抄手", color: "#2d98da" },
            { text: "水饺", color: "#45aaf2" }
        ];

        // 创建转盘分区
        const wheel = document.getElementById('wheel');
        const sectionAngle = 360 / prizes.length;
        
        prizes.forEach((prize, index) => {
            const section = document.createElement('div');
            section.className = 'section';
            section.style.transform = `rotate(${index * sectionAngle}deg)`;
            section.style.backgroundColor = prize.color;
            
            // 调整文本方向
            const textSpan = document.createElement('span');
            textSpan.textContent = prize.text;
            textSpan.style.transform = `rotate(${sectionAngle / 2}deg)`;
            textSpan.style.display = 'inline-block';
            textSpan.style.paddingLeft = '100px';
            textSpan.style.paddingBottom = '25px';
            
            section.appendChild(textSpan);
            wheel.appendChild(section);
        });

        // 旋转转盘
        const spinBtn = document.getElementById('spin-btn');
        const resultEl = document.getElementById('result');
        
        spinBtn.addEventListener('click', () => {
            // 禁用按钮防止重复点击
            spinBtn.disabled = true;
            resultEl.textContent = '';
            
            // 随机旋转角度 (5-10圈 + 随机奖品位置)
            const spinAngle = 1800 + Math.floor(Math.random() * 3600) + (Math.floor(Math.random() * prizes.length) * sectionAngle);
            
            // 应用旋转
            wheel.style.transform = `rotate(${-spinAngle}deg)`;
            
            // 旋转结束后显示结果
            setTimeout(() => {
                const normalizedAngle = (spinAngle % 360);
                const prizeIndex = Math.floor(normalizedAngle / sectionAngle);
                const winningPrize = prizes[prizes.length - 1 - prizeIndex];
                
                resultEl.textContent = `今天吃: ${winningPrize.text}`;
                spinBtn.disabled = false;
                
                // 庆祝效果 - 创建彩色纸屑
                createConfetti();
            }, 4000);
        });

        // 创建彩色纸屑效果
        function createConfetti() {
            const colors = ['#e74c3c', '#e67e22', '#f39c12', '#f1c40f', '#2ecc71', '#27ae60', '#16a085', '#1abc9c', '#3498db', '#2980b9', '#9b59b6', '#8e44ad', '#34495e', '#e84393', '#fd79a8'];
            
            for (let i = 0; i < 150; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = `${Math.random() * 100}vw`;
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.width = `${Math.random() * 10 + 5}px`;
                confetti.style.height = confetti.style.width;
                confetti.style.animationDuration = `${Math.random() * 2 + 2}s`;
                
                document.body.appendChild(confetti);
                
                // 动画结束后移除元素
                setTimeout(() => {
                    confetti.remove();
                }, 3000);
            }
        }
    </script>
</body>
</html>
